﻿@page "/menu"
@page "/docs/guides/components/menu.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Menu
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>Menu</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    In this demo a multi-level menu displays component categories (<strong>General</strong>, <strong>Inputs</strong>, <strong>Data</strong>, <strong>Containers</strong>, <strong>More</strong>) with navigation paths, icons, and some disabled items, demonstrating parent <code>Click</code> events and child-specific <code>Click</code> handlers logging to console.
</RadzenText>

<RadzenExample ComponentName="Menu" Example="MenuConfig">
    <MenuConfig />
</RadzenExample>

<RadzenText Anchor="menu#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Keyboard Navigation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor Menu component.
</RadzenText>

<KeyboardNavigationDataGrid Data="@shortcuts" />

@code {
    public List<KeyboardShortcut> shortcuts = new()
    {
        new KeyboardShortcut { Key = "Tab", Action = "Navigate to a Menu." },
        new KeyboardShortcut { Key = "RightArrow", Action = "Focus next top Menu item." },
        new KeyboardShortcut { Key = "LeftArrow", Action = "Focus previous top Menu item." },
        new KeyboardShortcut { Key = "DownArrow", Action = "Focus next child Menu item." },
        new KeyboardShortcut { Key = "UpArrow", Action = "Focus previous child Menu item." },
        new KeyboardShortcut { Key = "Space or Enter on an expandable Menu item", Action = "Expand the Menu item." },
        new KeyboardShortcut { Key = "Esc on an expandable Menu item", Action = "Collapse the Menu item." },
        new KeyboardShortcut { Key = "Space or Enter on a non-expandable Menu item", Action = "Navigate." }
    };
}
